<template>
  <div class="home">
    <div class="body">
      <div class="title">齐套核对</div>
      <div style="text-align:left;">
          <el-button type="primary" class="tabchange" v-bind:class="{'seltab':tabSel==2}" @click="search(2)">今日来料</el-button>
          <el-button type="primary" class="tabchange" v-bind:class="{'seltab':tabSel==1}" @click="search(1)">实时来料库存</el-button>
      </div>
      <div class="cont">
          <div v-show="tabSel===1" style="margin:30px;">
              <div class="search">
                    <div class="block">
                        <span style="display:inline">厂家</span>
                        <el-select
                            v-model="customID1"
                            filterable
                            remote
                            reserve-keyword
                            placeholder="请选择"
                            :remote-method="remoteCustomer1"
                            @change="changeCustomer1"
                            style="margin-left:10px;"
                        >
                            <el-option
                            v-for="item in customerList1"
                            :key="item.FlnkID"
                            :label="item.CustomerName"
                            :value="item.FlnkID"
                            ></el-option>
                        </el-select>
                    </div>
                    <div class="block">
                        <span style="display:inline">款式</span>
                        <el-select
                            v-model="styleID1"
                            filterable
                            remote
                            reserve-keyword
                            placeholder="请选择"
                            :remote-method="remoteStyle1"
                            @change="changeStyle1"
                            style="margin-left:10px;"
                        >
                            <el-option
                            v-for="item in styleList1"
                            :key="item.FlnkID"
                            :label="item.MaterielName"
                            :value="item.FlnkID"
                            ></el-option>
                        </el-select>
                    </div>
                    <el-button type="primary" style="width:200px;height:40px" @click="searchToday()">查询</el-button>
              </div>
              <div v-if="false" class="title">料框号：{{barCode}}</div>
              <div class="tbtitle">裁片信息</div>
              <div>
                <el-table
                        :data="productList1"
                        :row-style="tableRowStyle"
                        :header-cell-style="tableHeaderColor"
                        highlight-current-row
                        style="width: 100%;font-size:16px;"
                        height="5rem"
                    >
                        <el-table-column label="序号" width="160" align="center">
                        <template slot-scope="scope">{{scope.$index+1}}</template>
                        </el-table-column>
                        <el-table-column prop="CustomerName" label="厂家" align="center"></el-table-column>
                        <el-table-column prop="MaterielName" label="款式名称" align="center"></el-table-column>
                        <el-table-column prop="ColorConfigName" label="型号" width="240" align="center"></el-table-column>
                        <el-table-column prop="SpecConfigName" label="规格" width="240" align="center"></el-table-column>
                        <el-table-column prop="MinStockCount" label="数量" width="200" align="center"></el-table-column>
                        <el-table-column prop="IsCQT" label="状态" width="200" align="center">
                            <template slot-scope="scope">	
                                {{scope.row.IsCQT===1?'齐套':'非齐'}}
                            </template>
                        </el-table-column>
                </el-table>
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="totalCount1"
                        :current-page.sync="currentPage1"
                        :page-size="pageSize1"
                        @current-change="changePage1()"
                        style="margin:20px 0;"
                ></el-pagination>
              </div>
              <div class="tbtitle">辅料信息</div>
              <div>
                <el-table
                        :data="productList3"
                        :row-style="tableRowStyle"
                        :header-cell-style="tableHeaderColor"
                        highlight-current-row
                        style="width: 100%;font-size:16px;"
                        height="5rem"
                    >
                        <el-table-column label="序号" width="160" align="center">
                        <template slot-scope="scope">{{scope.$index+1}}</template>
                        </el-table-column>
                        <el-table-column prop="CustomerName" label="厂家" align="center"></el-table-column>
                        <el-table-column prop="MaterielName" label="款式名称" align="center"></el-table-column>
                        <el-table-column prop="ColorConfigName" label="型号" width="240" align="center"></el-table-column>
                        <el-table-column prop="SpecConfigName" label="规格" width="240" align="center"></el-table-column>
                        <el-table-column prop="MinStockCount" label="数量" width="200" align="center"></el-table-column>
                        <el-table-column prop="IsFQT" label="状态" width="200" align="center">
                            <template slot-scope="scope">	
                                {{scope.row.IsFQT===1?'齐套':'非齐'}}
                            </template>
                        </el-table-column>
                </el-table>
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="totalCount3"
                        :current-page.sync="currentPage3"
                        :page-size="pageSize1"
                        @current-change="changePage3()"
                        style="margin:20px 0;"
                ></el-pagination>
              </div>
          </div>
          <div v-show="tabSel===2" style="margin:30px;">
              <div class="search">
                    <div class="block">
                        <span style="display:inline">厂家</span>
                        <el-select
                            v-model="customID2"
                            filterable
                            remote
                            reserve-keyword
                            placeholder="请选择"
                            :remote-method="remoteCustomer2"
                            @change="changeCustomer2"
                            style="margin-left:10px;"
                        >
                            <el-option
                            v-for="item in customerList2"
                            :key="item.FlnkID"
                            :label="item.CustomerName"
                            :value="item.FlnkID"
                            ></el-option>
                        </el-select>
                    </div>
                    <div class="block">
                        <span style="display:inline">款式</span>
                        <el-select
                            v-model="styleID2"
                            filterable
                            remote
                            reserve-keyword
                            placeholder="请选择"
                            :remote-method="remoteStyle2"
                            @change="changeStyle2"
                            style="margin-left:10px;"
                        >
                            <el-option
                            v-for="item in styleList2"
                            :key="item.FlnkID"
                            :label="item.MaterielName"
                            :value="item.FlnkID"
                            ></el-option>
                        </el-select>
                    </div>
                    <div class="block">
                        <span style="display:inline">日期</span>
                        <el-date-picker
                            v-model="dateRange"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            style="width:240px"
                            @change="changeTime"
                        ></el-date-picker>
                    </div>
                    <el-button type="primary" style="width:200px;height:40px" @click="searchTime()">查询</el-button>
              </div>
              <div class="tbtitle">裁片信息</div>
              <div>
                <el-table
                        :data="productList2"
                        :row-style="tableRowStyle"
                        :header-cell-style="tableHeaderColor"
                        highlight-current-row
                        style="width: 100%;font-size:16px;"
                        height="5rem"
                    >
                        <el-table-column label="序号" width="160" align="center">
                        <template slot-scope="scope">{{scope.$index+1}}</template>
                        </el-table-column>
                        <el-table-column prop="CustomerName" label="厂家" align="center"></el-table-column>
                        <el-table-column prop="MaterielName" label="款式名称" width="240" align="center"></el-table-column>
                        <el-table-column prop="ColorConfigName" label="型号" width="240" align="center"></el-table-column>
                        <el-table-column prop="SpecConfigName" label="规格" width="240" align="center"></el-table-column>
                        <el-table-column prop="MinStockCount" label="数量" width="200" align="center"></el-table-column>
                        <el-table-column prop="IsCQT" label="裁片" width="200" align="center">
                            <template slot-scope="scope">	
                                {{scope.row.IsCQT===1?'√':'×'}}
                            </template>
                        </el-table-column>
                </el-table>
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="totalCount2"
                        :current-page.sync="currentPage2"
                        :page-size="pageSize2"
                        @current-change="changePage2()"
                        style="margin:20px 0;"
                ></el-pagination>
              </div>
              <div class="tbtitle">辅料信息</div>
              <div>
                <el-table
                        :data="productList4"
                        :row-style="tableRowStyle"
                        :header-cell-style="tableHeaderColor"
                        highlight-current-row
                        style="width: 100%;font-size:16px;"
                        height="5rem"
                    >
                        <el-table-column label="序号" width="160" align="center">
                        <template slot-scope="scope">{{scope.$index+1}}</template>
                        </el-table-column>
                        <el-table-column prop="CustomerName" label="厂家" align="center"></el-table-column>
                        <el-table-column prop="MaterielName" label="款式名称" width="240" align="center"></el-table-column>
                        <el-table-column prop="ColorConfigName" label="型号" width="240" align="center"></el-table-column>
                        <el-table-column prop="SpecConfigName" label="规格" width="240" align="center"></el-table-column>
                        <el-table-column prop="MinStockCount" label="数量" width="200" align="center"></el-table-column>
                        <el-table-column prop="IsFQT" label="辅料" width="200" align="center">
                            <template slot-scope="scope">	
                                {{scope.row.IsFQT===1?'√':'×'}}
                            </template>
                        </el-table-column>
                </el-table>
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="totalCount4"
                        :current-page.sync="currentPage4"
                        :page-size="pageSize2"
                        @current-change="changePage4()"
                        style="margin:20px 0;"
                ></el-pagination>
              </div>
          </div>
      </div>
    </div>
  </div>
</template>
<script>
import Mixin from '@/components/mixin' // 混入
import {GetTimeProductStockByFilter, GetProductStyle, GetCustomerList, GetTimeProductFStockByFilter} from '@/api/prison' // 接口
export default {
  name: 'qlcheck',
  data () {
    return {
      tabSel: 1, // 默认选择的tab
      productList1: [], // 料详细列表
      productList2: [], // 料详细列表
      currentPage1: 1, // 左侧列表当前页面
      pageSize1: 5, // 当前显示的行数
      currentPage2: 1, // 左侧列表当前页面
      pageSize2: 5, // 当前显示的行数
      totalCount1: 0,
      totalCount2: 0,
      barCode: '',
      customID1: '', // 客户编号
      customerList1: [], // 客户列表
      customerallList1: [], // 客户列表
      customID2: '', // 客户编号
      customerList2: [], // 客户列表
      customerallList2: [], // 客户列表
      styleID1: '', // 款式编号
      styleList1: [], // 款式列表
      styleallList1: [], // 款式列表
      styleID2: '', // 款式编号
      styleList2: [], // 款式列表
      styleallList2: [], // 款式列表
      dateRange: '', // 日期
      totalCount4: 0,
      currentPage4: 1,
      productList4: [],
      totalCount3: 0,
      currentPage3: 1,
      productList3: []
    }
  },
  computed: {},
  components: {},
  mixins: [Mixin],
  methods: {
    // 修改table tr行的背景色
    tableRowStyle ({ row, rowIndex }) {
      return {
        backgroundColor: 'rgb(0, 63, 140)',
        color: '#fff',
        fontWeight: 'bold',
        height: '0.7rem',
        fontSize: '15px'
      }
    },
    // 修改table header的背景色
    tableHeaderColor ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: rgb(0, 63, 140);color: #fff;font-weight: bold;height:0.7rem;font-size:15px'
      }
    },
    // 查询数据
    search (index) {
      let vm = this
      vm.tabSel = index === 1 ? 2 : 1
      // 今日来料
      if (vm.tabSel === 1) {
        vm.currentPage = 1
        vm.todayProduct()

        vm.currentPage3 = 1
        vm.todayProductF()
      } else {
        vm.currentPage2 = 1
        vm.timeProduct()

        vm.currentPage4 = 1
        vm.timeProductF()
      }
    },
    // 今日来料查询
    todayProduct () {
      let vm = this
      let params = new FormData()
      params.append('PageIndex', vm.currentPage1)
      params.append('PageSize', vm.pageSize1)
      params.append('CustomID', vm.customID1)
      params.append('StyleID', vm.styleID1)
      params.append('StartDate', this.$moment().format('YYYY-MM-DD'))
      params.append('EndDate', this.$moment().format('YYYY-MM-DD'))
      GetTimeProductStockByFilter(params).then((response) => {
        if (response.data.result) {
          if (response.data.data != null &&
            response.data.data.length > 0) {
            vm.productList1 = response.data.data
            vm.totalCount1 = response.data.count
            vm.barCode = response.data.barCode
          } else {
            vm.barCode = '--'
            vm.productList1 = response.data.data
            vm.totalCount1 = response.data.count
          }
        }
      })
    },
    todayProductF () {
      let vm = this
      let params = new FormData()
      params.append('PageIndex', vm.currentPage3)
      params.append('PageSize', vm.pageSize1)
      params.append('CustomID', vm.customID1)
      params.append('StyleID', vm.styleID1)
      params.append('StartDate', this.$moment().format('YYYY-MM-DD'))
      params.append('EndDate', this.$moment().format('YYYY-MM-DD'))
      GetTimeProductFStockByFilter(params).then((response) => {
        if (response.data.result) {
          if (response.data.data != null &&
            response.data.data.length > 0) {
            vm.productList3 = response.data.data
            vm.totalCount3 = response.data.count
            vm.barCode = response.data.barCode
          } else {
            vm.barCode = '--'
            vm.productList3 = response.data.data
            vm.totalCount3 = response.data.count
          }
        }
      })
    },
    changePage1 () {
      let vm = this
      vm.todayProduct()
    },
    changeTime () {
      // this.timeProduct()
    },
    // 实时来料
    timeProduct () {
      let vm = this
      let params = new FormData()
      params.append('PageIndex', vm.currentPage2)
      params.append('PageSize', vm.pageSize2)
      params.append('CustomID', vm.customID2)
      params.append('StyleID', vm.styleID2)
      if (vm.dateRange === '') {
        params.append('StartDate', this.$moment().subtract(10, 'year').format('YYYY-MM-DD'))
        params.append('EndDate', this.$moment().format('YYYY-MM-DD'))
      } else {
        params.append('StartDate', vm.$moment(vm.dateRange[0]).format('YYYY-MM-DD'))
        params.append('EndDate', vm.$moment(vm.dateRange[1]).format('YYYY-MM-DD'))
      }

      GetTimeProductStockByFilter(params).then((response) => {
        if (response.data.result) {
          if (response.data.data != null &&
            response.data.data.length > 0) {
            vm.productList2 = response.data.data
            vm.totalCount2 = response.data.count
            // vm.barCode = response.data.barCode
          } else {
            vm.barCode = '--'
            vm.productList2 = response.data.data
            vm.totalCount2 = response.data.count
          }
        }
      })
    },
    timeProductF () {
      let vm = this
      let params = new FormData()
      params.append('PageIndex', vm.currentPage4)
      params.append('PageSize', vm.pageSize2)
      params.append('CustomID', vm.customID2)
      params.append('StyleID', vm.styleID2)
      if (vm.dateRange === '') {
        params.append('StartDate', this.$moment().subtract(10, 'year').format('YYYY-MM-DD'))
        params.append('EndDate', this.$moment().format('YYYY-MM-DD'))
      } else {
        params.append('StartDate', vm.$moment(vm.dateRange[0]).format('YYYY-MM-DD'))
        params.append('EndDate', vm.$moment(vm.dateRange[1]).format('YYYY-MM-DD'))
      }

      GetTimeProductFStockByFilter(params).then((response) => {
        if (response.data.result) {
          if (response.data.data != null &&
            response.data.data.length > 0) {
            vm.productList4 = response.data.data
            vm.totalCount4 = response.data.count
            // vm.barCode = response.data.barCode
          } else {
            vm.barCode = '--'
            vm.productList4 = response.data.data
            vm.totalCount4 = response.data.count
          }
        }
      })
    },
    changePage2 () {
      let vm = this
      vm.timeProduct()
    },
    changePage4 () {
      let vm = this
      vm.timeProductF()
    },
    remoteCustomer1 (query) {
      if (query !== '') {
        setTimeout(() => {
          this.customerList1 = this.customerallList1.filter((item) => {
            return (
              item.CustomerName.indexOf(query) > -1
            )
          })
        }, 200)
      } else {
        this.customerList1 = this.customerallList1
      }
    },
    changeCustomer1 () {
      // this.todayProduct()
    },
    remoteStyle1 (query) {
      if (query !== '') {
        setTimeout(() => {
          this.styleList1 = this.styleallList1.filter((item) => {
            return (
              item.MaterielName.indexOf(query) > -1
            )
          })
        }, 200)
      } else {
        this.styleList1 = this.styleallList1
      }
    },
    changeStyle1 () {
      // this.todayProduct()
    },
    searchToday () {
      this.todayProduct()
      this.todayProductF()
    },
    searchTime () {
      this.timeProduct()
      this.timeProductF()
    },
    remoteCustomer2 (query) {
      if (query !== '') {
        setTimeout(() => {
          this.customerList2 = this.customerallList2.filter((item) => {
            return (
              item.CustomerName.indexOf(query) > -1
            )
          })
        }, 200)
      } else {
        this.customerList2 = this.customerallList2
      }
    },
    changeCustomer2 () {
      // this.timeProduct()
    },
    remoteStyle2 (query) {
      if (query !== '') {
        setTimeout(() => {
          this.styleList2 = this.styleallList2.filter((item) => {
            return (
              item.MaterielName.indexOf(query) > -1
            )
          })
        }, 200)
      } else {
        this.styleList2 = this.styleallList2
      }
    },
    changeStyle2 () {
      // this.timeProduct()
    },
    // 获取款式数据
    getProductStyle () {
      let vm = this
      GetProductStyle().then((response) => {
        if (response.data.result === 1) {
          vm.styleList1 = response.data.data
          vm.styleallList1 = response.data.data
          vm.styleList2 = response.data.data
          vm.styleallList2 = response.data.data
        } else {
          vm.$message(response.data.error)
        }
      })
    },
    // 获取客户数据
    getCustomer () {
      let vm = this
      GetCustomerList().then((response) => {
        if (response.data.result === 1) {
          vm.customerList1 = response.data.data
          vm.customerallList1 = response.data.data
          vm.customerList2 = response.data.data
          vm.customerallList2 = response.data.data
        } else {
          vm.$message(response.data.error)
        }
      })
    }
  },
  watch: {},
  mounted () {
    let vm = this
    vm.getProductStyle()
    vm.getCustomer()
    vm.todayProduct()
    vm.todayProductF()
  },
  beforeDestroy: function () {}
}
</script>
<style lang="scss" scoped>
@import "~@/css/lcheck/lkcheck.scss";
</style>
<style lang="scss">
.el-date-editor .el-range-separator{
    font-size: 0.2rem;
    font-weight: normal;
    width: 6px;
    margin-top: 0.14rem;
    color: #fff !important;
}
.el-table::before {
    height: 0px;
 }
</style>